<template>
    <div class="parking-record">
      <!-- 搜索区域 -->
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" ref="searchForm">
          <el-form-item label="车牌号" prop="plateNumber">
            <el-input v-model="searchForm.plateNumber" placeholder="请输入车牌号" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="停车中" :value="1"></el-option>
              <el-option label="已离场" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入场时间">
            <el-date-picker
              v-model="searchForm.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 表格区域 -->
      <el-card class="table-card">
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="handleAdd">登记入场</el-button>
        </div>
  
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
  
          <el-table-column
            prop="plateNumber"
            label="车牌号"
            width="120"
            align="center"
          ></el-table-column>
  
          <el-table-column
            prop="carType"
            label="车辆类型"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.carType === 1 ? '临时车' : '月租车' }}
            </template>
          </el-table-column>
  
          <el-table-column
            prop="entryTime"
            label="入场时间"
            width="180"
            align="center"
          ></el-table-column>
  
          <el-table-column
            prop="exitTime"
            label="出场时间"
            width="180"
            align="center"
          ></el-table-column>
  
          <el-table-column
            prop="parkingDuration"
            label="停车时长"
            width="120"
            align="center"
          ></el-table-column>
  
          <el-table-column
            prop="fee"
            label="停车费用"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.fee ? `￥${scope.row.fee}` : '-' }}
            </template>
          </el-table-column>
  
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 1 ? 'primary' : 'success'">
                {{ scope.row.status === 1 ? '停车中' : '已离场' }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column
            label="操作"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status === 1"
                type="text"
                size="small"
                @click="handleExit(scope.row)"
              >登记离场</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleDetail(scope.row)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </el-card>
  
      <!-- 入场登记对话框 -->
      <el-dialog
        title="登记入场"
        :visible.sync="entryDialogVisible"
        width="500px"
        @close="handleDialogClose"
      >
        <el-form
          :model="parkingForm"
          :rules="parkingRules"
          ref="parkingForm"
          label-width="100px"
        >
          <el-form-item label="车牌号" prop="plateNumber">
            <el-input v-model="parkingForm.plateNumber" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          
          <el-form-item label="车辆类型" prop="carType">
            <el-radio-group v-model="parkingForm.carType">
              <el-radio :label="1">临时车</el-radio>
              <el-radio :label="2">月租车</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="parkingForm.remark"
              :rows="3"
              placeholder="请输入备注信息"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="entryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEntry">确 定</el-button>
        </div>
      </el-dialog>
  
      <!-- 离场登记对话框 -->
      <el-dialog
        title="登记离场"
        :visible.sync="exitDialogVisible"
        width="500px"
      >
        <div class="exit-info">
          <p>车牌号：{{ currentRecord.plateNumber }}</p>
          <p>入场时间：{{ currentRecord.entryTime }}</p>
          <p>停车时长：{{ currentRecord.parkingDuration }}</p>
          <p>应收费用：￥{{ currentRecord.fee }}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="exitDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitExit">确认离场</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ParkingRecord',
    data() {
      return {
        // 搜索表单
        searchForm: {
          plateNumber: '',
          status: '',
          timeRange: []
        },
        // 表格数据
        tableData: [],
        // 加载状态
        loading: false,
        // 分页信息
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        // 入场对话框显示状态
        entryDialogVisible: false,
        // 离场对话框显示状态
        exitDialogVisible: false,
        // 当前操作的记录
        currentRecord: {},
        // 入场表单数据
        parkingForm: {
          plateNumber: '',
          carType: 1,
          remark: ''
        },
        // 表单验证规则
        parkingRules: {
          plateNumber: [
            { required: true, message: '请输入车牌号', trigger: 'blur' },
            { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, message: '请输入正确的车牌号', trigger: 'blur' }
          ],
          carType: [
            { required: true, message: '请选择车辆类型', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      // 获取列表数据
      fetchData() {
        this.loading = true;
        const params = {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          plateNumber: this.searchForm.plateNumber,
          status: this.searchForm.status,
          startTime: this.searchForm.timeRange ? this.searchForm.timeRange[0] : '',
          endTime: this.searchForm.timeRange ? this.searchForm.timeRange[1] : ''
        };
  
        this.$axios.get('/api/user-server/parking/record/list', { params })
          .then(response => {
            if (response.data.code === 200) {
              this.tableData = response.data.data.list;
              this.pagination.total = response.data.data.total;
            }
          })
          .catch(error => {
            this.$message.error('获取数据失败');
          })
          .finally(() => {
            this.loading = false;
          });
      },
  
      // 搜索
      handleSearch() {
        this.pagination.currentPage = 1;
        this.fetchData();
      },
  
      // 重置搜索
      resetSearch() {
        this.$refs.searchForm.resetFields();
        this.handleSearch();
      },
  
      // 显示入场登记对话框
      handleAdd() {
        this.entryDialogVisible = true;
      },
  
      // 显示离场登记对话框
      handleExit(row) {
        this.currentRecord = row;
        this.exitDialogVisible = true;
      },
  
      // 查看详情
      handleDetail(row) {
        // 实现查看详情的逻辑
      },
  
      // 提交入场登记
      submitEntry() {
        this.$refs.parkingForm.validate(valid => {
          if (valid) {
            this.$axios.post('/api/user-server/parking/record/entry', this.parkingForm)
              .then(response => {
                if (response.data.code === 200) {
                  this.$message.success('登记成功');
                  this.entryDialogVisible = false;
                  this.fetchData();
                }
              })
              .catch(error => {
                this.$message.error('登记失败');
              });
          }
        });
      },
  
      // 提交离场登记
      submitExit() {
        this.$axios.post('/api/user-server/parking/record/exit', { id: this.currentRecord.id })
          .then(response => {
            if (response.data.code === 200) {
              this.$message.success('离场登记成功');
              this.exitDialogVisible = false;
              this.fetchData();
            }
          })
          .catch(error => {
            this.$message.error('登记失败');
          });
      },
  
      // 分页大小改变
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.fetchData();
      },
  
      // 当前页改变
      handleCurrentChange(val) {
        this.pagination.currentPage = val;
        this.fetchData();
      },
  
      // 对话框关闭
      handleDialogClose() {
        this.$refs.parkingForm.resetFields();
      }
    },
    created() {
      this.fetchData();
    }
  }
  </script>
  
  <style scoped>
  .parking-record {
    padding: 20px;
  }
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .table-card {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
  
  .exit-info {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .exit-info p {
    margin: 10px 0;
    font-size: 14px;
  }
  </style>